<template>
  <div id="login" class="bg-dark d-flex justify-content-center">
    <div id="box" class="bg-white mt-5 rounded">
      <div id="top" class="d-flex flex-column align-items-center p-3">
        <h3 class="mb-2 d-flex align-items-center text-muted">
          <Icon type="md-briefcase" size="55" class="mr-2" color="#2db7f5" />
          企业网盘
        </h3>
        <p class="small text-muted mt-2">企业网盘解决方案</p>
      </div>
      <!-- 表单 -->
      <Form ref="loginForm" :model="loginForm" :rules="loginRules" class="p-3">
        <FormItem prop="username">
          <Input
            v-model="loginForm.username"
            placeholder="请输入用户名..."
          ></Input>
        </FormItem>
        <FormItem prop="password" class="mb-4">
          <Input
            type="password"
            v-model="loginForm.password"
            placeholder="请输入密码..."
          ></Input>
        </FormItem>
        <FormItem prop="repassword" class="mb-4" v-if="type !== 'login'">
          <Input
            type="password"
            v-model="loginForm.repassword"
            placeholder="请再次输入密码..."
          ></Input>
        </FormItem>
        <div class="d-flex justify-content-end mb-2">
          <!-- <Checkbox v-model="loginForm.checked">自动登录</Checkbox> -->
          <div>
            <!-- <a href="javascript:;" class="small text-primary">忘记密码?</a>
            <span class="mx-1 small">|</span> -->
            <a
              href="javascript:;"
              class="small text-primary"
              @click="changeType"
            >
              {{ type == "login" ? "立即注册" : "立即登录" }}
            </a>
          </div>
        </div>
        <FormItem class="mb-2">
          <Button type="primary" long @click="handleSubmit('loginForm')">{{
            type == "login" ? "登录" : "注册"
          }}</Button>
        </FormItem>
      </Form>
    </div>
  </div>
</template>

<script>
import { userReg, userLogin } from "../api/user";

export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
        repassword: "",
        // checked: false,
      },
      loginRules: {
        username: [
          {
            required: true,
            message: "用户名不能为空",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur",
          },
          {
            type: "string",
            min: 5,
            message: "密码不少于5位",
            trigger: "blur",
          },
        ],
        repassword: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur",
          },
          {
            type: "string",
            min: 5,
            message: "密码不少于5位",
            trigger: "blur",
          },
        ],
      },
      type: "login",
    };
  },
  methods: {
    // 登录验证
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          // 注册
          if (this.type == "reg") {
            if (this.loginForm.password == this.loginForm.repassword) {
              userReg(this.loginForm)
                .then((response) => {
                  if (response.status == 200) {
                    this.$Message.success(response.data.msg);
                    this.type = "login";
                  }
                })
                .catch((error) => {
                  this.$Message.error(error.response.data.data);
                });
            } else {
              this.$Message.error("密码输入不一致，请重新输入");
            }
          } else {
            // 登录
            this.$store
              .dispatch("login", this.loginForm)
              .then((response) => {
                if (response.status == 200) {
                  this.$Message.success("登录成功");
                  this.$router.push("/index");
                }
              })
              .catch((error) => this.$Message.error(error.response.data.data));
          }
        } else {
          this.$Message.error("请正确填写信息");
        }
      });
    },
    // 注册 => <=登录
    changeType() {
      this.type = this.type == "login" ? "reg" : "login";
    },
  },
};
</script>
<style lang="scss" scope>
#login {
  height: 100%;
}
#box {
  width: 380px;
  height: max-content;
}
</style>
